<template>
  <div>
    <el-row>
      <el-col :span="8">
        <el-form ref="form" :model="followUp" :rules="rules" label-width="80px">
          <el-form-item label="客户状态" prop="customerState">
            <el-select
              v-model="followUp.customerState"
              placeholder="请输入客户状态"
            >
              <el-option label="未知" value="UNKNOWN">未知</el-option>
              <el-option label="有意向" value="INTENTIONAL">有意向</el-option>
              <el-option label="成交" value="DEALED">成交</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="跟进日期" prop="followUpDate">
            <el-date-picker
              v-model="followUp.followUpDate"
              type="date"
              placeholder="date"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="跟进内容" prop="followUpNote">
            <el-input
              type="textarea"
              v-model="followUp.followUpNote"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-success" @click="handleSave"
              >保存</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="16">
        <el-timeline>
          <el-timeline-item
            v-for="f in followUpHistory"
            :key="f.followUpId"
            :timestamp="f.followUpDate"
          >
            {{ f.followUpNote }}
          </el-timeline-item>
        </el-timeline>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    currentCust: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      followUp: {
        customerState: null,
      },
      followUpHistory: [],
      rules: {
        customerState: [
          { required: true, message: "请输入客户状态", trigger: "blur" },
        ],
        followUpDate: [
          { required: true, message: "请输入最后跟进日期", trigger: "blur" },
        ],
        followUpNote: [
          { required: true, message: "请输入最后跟进状态", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.followUp.customerState = this.currentCust.state;
    this.getHistory();
  },
  methods: {
    getHistory() {
      this.axios
      .get("/followUp/list", { params: { custId: this.currentCust.custId } })
      .then((resp) => {
        this.followUpHistory = resp.data;
      })
      .catch(() => {
        this.$message.error("保存失败");
      });
    },
    handleSave() {
      this.$refs.form.validate((valid) => {
        if (!valid) return;
        this.followUp.custId = this.currentCust.custId;
        this.followUp.followUpUsername = this.currentCust.ownerUsername;
        this.axios
          .post("/followUp/create", this.followUp)
          .then(() => {
            this.$message.success("保存成功！");
            this.getHistory();
          })
          .catch(() => {
            this.$message.error("保存失败！");
          });
      });
    },
  },
};
</script>

<style>
</style>